<!--
 * @Description: 请修改成厚
 * @Version: 1.0
 * @Author: lvzhou
 * @Date: 2019-10-16 21:27:48
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-15 11:31:41
 -->
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#FAFAFA', color: 'rgba(0,0,0,0.85)' }"
      :default-sort="{ prop: 'createTime', order: 'descending' }">
      <template slot="empty">
        <div
          class="v2-table__empty-data v2-table__empty-border"
          style="width: 100%">
          <div
            class="v2-table__empty-default">
            <div
              class="v2-table__empty-icon">
              <div
                class="v2-table__icon--inner">
                <span
                  class="inner-rect" />
                <span
                  class="inner-horizontal-line inner-line1" />
                <span
                  class="inner-horizontal-line inner-line2" />
                <span
                  class="inner-horizontal-line inner-line3" />
                <span
                  class="inner-circle" />
              </div>
            </div>
            <span
              class="v2-table__empty-text">暂无数据</span>
          </div>
        </div>
      </template>
      <el-table-column
        v-for="item in tableColumns"
        :key="item.id"
        :fixed="item.fixed"
        :prop="item.prop"
        :label="item.title"
        :min-width="item.minwidth"
        :sortable="item.sortable"
        :filters="item.filters"
        :align="item.align"
        :filter-method="item.filters && filterHandler"
        :show-overflow-tooltip="item.tooltip">
        <template
          slot-scope="scope">
          <template
            v-if="item.title == '操作'">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="showEdit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="showDel(scope.row)">删除</el-button>
          </template>
          <template
            v-else-if="item.title == '头像'">
            <div>
              <el-popover
                placement="right"
                width="420"
                trigger="hover">
                <img
                  style="width:100%"
                  :src="scope.row.imagesUrl">
                <img
                  slot="reference"
                  :src="scope.row.imagesUrl"
                  style="width:100px">
              </el-popover>
            </div>
          </template>
          <template
            v-else-if="item.title == '是否启用'">
            <span
              v-if="scope.row.isEnable === 0"
              style="color:#409eff">启用</span>
            <span
              v-if="scope.row.isEnable === 1"
              style="color:red">禁用</span>
          </template>
          <template
            v-else-if="item.title == '新闻简介'">
            <div
              class="line-2">
              {{ scope.row.introduction }}
            </div>
          </template>
          <template
            v-else-if="item.title == '首页置顶'">
            <span
              v-if="scope.row.isTop === 0">置顶</span>
            <span
              v-else>否</span>
          </template>
          <template
            v-else-if="item.title == '发布时间'">
            <span>{{ scope.row.time.substring(0,11) }}</span>
          </template>
          <template
            v-else>{{ scope.row[item.prop] }}</template>
        </template>
      </el-table-column>
    </el-table>
    <div
      style="margin-top: 33px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <PlayVideo ref="show" />
  </div>
</template>

<script>
import { REQUEST_LIST } from '@/api/requestList'
import PlayVideo from './playVideo.vue'
export default {
  components: { PlayVideo },
  props: {
    tableData: { type: Array, default: () => [] },
    tableColumns: { type: Array, default: () => [] },
    tableClass: { type: String, default: '' },
    pageSize: { type: Number, default: 10 },
    pageNum: { type: Number, default: 1 },
    total: { type: Number, default: 0 },
    showImg: { type: Boolean, default: false },
    isSelection: { type: Boolean, default: false }
  },
  data() {
    return {
      selectColumns: [],
      visible: false
    }
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleSizeChange(e) {
      this.$emit('changePage', {
        pageNum: this.pageNum,
        pageSize: e
      })
    },
    handleCurrentChange(e) {
      this.$emit('changePage', {
        pageNum: e,
        pageSize: this.pageSize
      })
    },
    showEdit(e) {
      if (e.imagesUrl) {
        if (e.imagesUrl.includes('mp4')) {
          this.$emit('editTable', { value: e, type: 2 })
        } else {
          this.$emit('editTable', { value: e, type: 1 })
        }
      } else {
        this.$emit('editTable', { value: e, type: 3 })
      }
    },
    showDel(e) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          REQUEST_LIST.REQUST_FCN('NEWSDEL', { id: e.id }, true).then(res => {
            this.$message.success('删除成功！')
            this.$emit('ok')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style>
.table_img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin-right: 10px;
}
.el-icon-arrow-down {
  position: relative;
  display: inline-block;
  margin-top: -9px;
  float: left;
  margin-left: 5px;
}
.el-icon-arrow-down::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #bfbfbf;
}
.el-icon-arrow-down::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  background: #bfbfbf;
  position: absolute;
  top: 4px;
  left: 4px;
}
.el-table__expand-icon > .el-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  line-height: 14px;
  text-align: center;
  background: #fff;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.el-table__expand-icon > .el-icon {
  position: inherit;
  left: 50%;
  top: 0;
  margin-left: -5px;
  margin-top: -5px;
}
.el-table__expand-icon {
  height: auto;
}
.el-table__expand-icon > .el-icon-arrow-right:before {
  content: '+';
}
.el-table__expand-icon.el-table__expand-icon--expanded > .el-icon-arrow-right:before {
  content: '-';
}
.el-table__expand-icon.el-table__expand-icon--expanded {
  transform: rotate(0deg) !important;
}
.ant-table-pagination.ant-pagination {
  float: none !important;
  margin: 16px 0;
}
.table_title_left th:not(:first-child) {
  text-align: left !important;
}
.table_title_right th:not(:first-child) {
  text-align: right !important;
}
.table_title_center th:not(:first-child) {
  text-align: center !important;
}
.table_title_left th:first-child {
  text-align: center !important;
}
.table_title_right th:first-child {
  text-align: center !important;
}
.table_title_center th:first-child {
  text-align: center !important;
}
</style>
<style lang="less" scoped>
.red_text {
  color: red;
}
.line-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
